light mode
night mode
অ্যাঙ্গুলার হাই চার্ট (Angular High Charts)
Angular এবং Highcharts পরিচিতি Angular কি? Highcharts কি? Highcharts কেন ব্যবহার করবেন? Angular এবং Highcharts এর ইন্টিগ্রেশন এর প্রয়োজনীয়তা Angular প্রজেক্ট সেটআপ Angular CLI দিয়ে নতুন প্রজেক্ট তৈরি করা প্রজেক্ট স্ট্রাকচার ব্যাখ্যা Node.js এবং npm ইনস্টল করা Angular CLI এর সাধারণ কমান্ডগুলো Highcharts লাইব্রেরি ইন্টিগ্রেশন Highcharts লাইব্রেরি ইনস্টল করা (npm দিয়ে) Highcharts Angular র‍্যাপার ইনস্টল করা প্রয়োজনীয় মডিউল ইমপোর্ট করা বেসিক চার্ট তৈরি করার জন্য কম্পোনেন্ট তৈরি করা বেসিক Highcharts চার্ট তৈরি করা Highcharts এর সাথে ডেটা কনফিগারেশন চার্টের প্রকারভেদ (Line, Bar, Pie, Column ইত্যাদি) চার্টের শিরোনাম, এক্সিস এবং লেবেল কনফিগারেশন ডায়নামিক ডেটা দিয়ে চার্ট আপডেট করা চার্টের অপশন এবং কাস্টমাইজেশন চার্ট থিম এবং স্টাইল পরিবর্তন চার্টের বিভিন্ন উপাদান কাস্টমাইজ করা (লেজেন্ড, টুলটিপ, সিরিজ) চার্টের অ্যাক্সিস কাস্টমাইজেশন (xAxis, yAxis) সিরিজের ডেটা এবং টুলটিপ কাস্টমাইজেশন উন্নত চার্ট অপশনসমূহ Multi-series চার্ট তৈরি করা Drilldown চার্ট ইমপ্লিমেন্ট করা Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা Highmaps ব্যবহার করে ম্যাপভিত্তিক চার্ট তৈরি করা ইন্টারঅ্যাকটিভ চার্ট তৈরি করা চার্টের ইভেন্ট হ্যান্ডলার কনফিগার করা ক্লিক, হোভার এবং অন্যান্য ইভেন্ট হ্যান্ডলিং চার্টে Zoom এবং Panning ফিচার যুক্ত করা চার্ট রিসাইজ এবং রেসপন্সিভ ডিজাইন API এবং ডেটা সোর্স ইন্টিগ্রেশন External API থেকে ডেটা লোড করা Real-time ডেটা আপডেটের জন্য WebSocket ব্যবহার করা Highcharts এর সাথে API এর মাধ্যমে ডায়নামিক ডেটা লোড করা JSON/REST API ব্যবহার করে ডেটা ইন্টিগ্রেশন Performance অপ্টিমাইজেশন Highcharts এর পারফরম্যান্স অপ্টিমাইজেশন টেকনিক বড় ডেটাসেটের সাথে কাজ করা Lazy loading ব্যবহার করা চার্টের পারফরম্যান্স টিউনিং টিপস Highcharts এর প্লাগইন এবং এক্সটেনশনস Highcharts এর জন্য বিভিন্ন প্লাগইন ব্যবহার ডেটা এক্সপোর্ট এবং প্রিন্টিং ফিচার Highcharts এর এক্সটেনশনস (Highstock, Highmaps, Gantt) Highcharts ড্যাশবোর্ড তৈরি কাস্টম চার্ট তৈরি করা Highcharts এর কাস্টম চার্ট ডিজাইন করা কাস্টম রেন্ডারিং লজিক যুক্ত করা চার্টের ডায়নামিক স্টাইল পরিবর্তন করা Highcharts টেমপ্লেট ও ডায়নামিক ডেটা বাইন্ডিং Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং ব্যবহার ngFor এবং ngIf এর মাধ্যমে ডায়নামিক চার্ট তৈরি করা চার্টের ডেটা আপডেট এবং রিফ্রেশ করা ডিবাগিং এবং টেস্টিং Highcharts ডিবাগ করা কমন ত্রুটির সমাধান Angular এর ইউনিট টেস্টিং ফ্রেমওয়ার্ক ব্যবহার করে Highcharts টেস্টিং End-to-End টেস্টিং (Protractor, Cypress) Deployment এবং Production Setup প্রোডাকশনের জন্য Angular এবং Highcharts অ্যাপ্লিকেশন বিল্ড করা Webpack এবং AOT (Ahead-of-Time) কম্পাইলেশন ব্যবহার Performance অপ্টিমাইজেশনের জন্য Minification এবং Bundling AWS, Firebase, বা অন্য কোন সার্ভারে অ্যাপ্লিকেশন ডিপ্লয় করা Highcharts এর এডভান্সড ফিচারসমূহ Highcharts Boost Module ব্যবহার করে বড় ডেটা ভিজ্যুয়ালাইজেশন Highcharts Heatmaps তৈরি Sankey এবং TreeMap চার্ট তৈরি Highcharts Solid Gauge চার্ট ইমপ্লিমেন্ট করা

Performance অপ্টিমাইজেশনের জন্য Minification এবং Bundling

Web Development - অ্যাঙ্গুলার হাই চার্ট (Angular High Charts) - Deployment এবং Production Setup |

Performance optimization Angular অ্যাপ্লিকেশন এবং Highcharts চার্টে গুরুত্বপূর্ণ। বড় এবং জটিল অ্যাপ্লিকেশনগুলির জন্য minification এবং bundling ফিচারগুলি ব্যবহারের মাধ্যমে কোডের আকার কমানো এবং অ্যাপ্লিকেশন লোডিং স্পিড উন্নত করা সম্ভব।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts এর সাথে minification এবং bundling অপ্টিমাইজেশন করতে হয়।

Minification কী?

Minification হল একটি প্রক্রিয়া যেখানে কোডের অপ্রয়োজনীয় অংশ যেমন সাদা স্পেস, কমেন্ট, নতুন লাইন, এবং দীর্ঘ ভ্যারিয়েবল নামগুলি সরিয়ে কোডের আকার কমানো হয়। এতে অ্যাপ্লিকেশন দ্রুত লোড হয় এবং সার্ভারের জন্য ট্রাফিক কমে যায়। Angular প্রকল্পে, এটি ডিফল্টভাবে প্রোডাকশন বিল্ডের অংশ হিসেবে অন্তর্ভুক্ত থাকে।

Bundling কী?

Bundling হল একাধিক স্ক্রিপ্ট বা ফাইলকে একটি বা কয়েকটি ফাইলে একত্রিত করা। এর ফলে ওয়েব অ্যাপ্লিকেশন কম ফাইলের মাধ্যমে লোড হতে পারে, যা ব্যান্ডউইথ সাশ্রয় করে এবং লোড টাইম কমায়। Angular CLI এর মাধ্যমে bundling খুবই সহজ।

Angular এ Minification এবং Bundling কীভাবে কাজ করে?

Angular CLI আপনাকে ng build --prod কমান্ড ব্যবহার করে প্রোডাকশন বিল্ড তৈরি করতে দেয়, যা ডিফল্টভাবে minification এবং bundling করে। এটি Angular অ্যাপ্লিকেশনকে অপ্টিমাইজ করতে সাহায্য করে।

স্টেপ 1: ng build --prod কমান্ড ব্যবহার করা

প্রোডাকশন বিল্ড তৈরি করতে, আপনাকে Angular CLI এর --prod ফ্ল্যাগ সহ ng build কমান্ডটি চালাতে হবে। এটি minification, bundling, এবং অন্যান্য পারফরম্যান্স অপ্টিমাইজেশন কার্যক্রম সম্পাদন করবে।

ng build --prod

এটি আপনার প্রজেক্টের dist/your-project-name ফোল্ডারে একটি প্রোডাকশন গ্রেড বিল্ড তৈরি করবে। এখানে সব কোড minified এবং bundled হবে।

স্টেপ 2: Angular Configuration এর মাধ্যমে Minification এবং Bundling কনফিগার করা

Angular CLI এর angular.json ফাইলের মাধ্যমে আপনি কিছু কনফিগারেশন সেট করতে পারেন, যা minification এবং bundling এর আচরণ পরিবর্তন করতে পারে।

angular.json ফাইলে আপনি নিচের কনফিগারেশন দেখতে পাবেন:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true,  // Minification সক্রিয় করা
              "outputHashing": "all",  // ফাইলের নামের সাথে হ্যাশ যোগ করা
              "sourceMap": false,  // প্রোডাকশন পরিবেশে Source maps নিষ্ক্রিয় করা
              "extractCss": true,  // CSS আলাদাভাবে এক্সট্র্যাক্ট করা
              "fileReplacements": [],
              "vendorChunk": false,  // Vendor chunk তৈরি করা
              "buildOptimizer": true  // Angular build অপটিমাইজার সক্রিয় করা
            }
          }
        }
      }
    }
  }
}

কনফিগারেশন ব্যাখ্যা:

  • optimization: এই অপশনটি minification এবং কোড অপটিমাইজেশন সক্রিয় করে।
  • outputHashing: এটি ফাইলের সাথে একটি হ্যাশ যোগ করে, যাতে ব্রাউজার ক্যাশিং এর মাধ্যমে স্ট্যাটিক ফাইলগুলি নতুন সংস্করণে আপডেট হয়।
  • sourceMap: প্রোডাকশন পরিবেশে সোর্স ম্যাপগুলি নিষ্ক্রিয় করে, যা অ্যাপ্লিকেশনের আকার কমাতে সাহায্য করে।
  • extractCss: এটি CSS ফাইলগুলোকে আলাদাভাবে এক্সপোর্ট করতে সাহায্য করে, যা আরও দ্রুত লোড হতে সহায়ক।
  • vendorChunk: Angular এর সমস্ত ভেন্ডর লাইব্রেরি (যেমন RxJS, Highcharts ইত্যাদি) একত্রে vendor.js ফাইলে ব্যান্ডলিং করবে।
  • buildOptimizer: এটি Angular কোডকে আরও অপ্টিমাইজ করে।

স্টেপ 3: Highcharts এর জন্য Optimization

Highcharts ব্যবহার করার সময়, আপনি বিভিন্নভাবে পারফরম্যান্স অপ্টিমাইজ করতে পারেন:

  1. Highcharts Boost Module: Highcharts Boost মডিউলটি বড় ডেটাসেটের সাথে কাজ করার সময় পারফরম্যান্স বৃদ্ধি করতে সাহায্য করে। এটি শুধুমাত্র ক্যানভাস রেন্ডারিং ব্যবহার করে, যা চার্ট রেন্ডারিংয়ের গতিকে দ্রুত করে।

    Boost মডিউল সক্রিয় করা:

    import * as Highcharts from 'highcharts';
import Boost from 'highcharts/modules/boost';

Boost(Highcharts); // Boost মডিউল সক্রিয় করা
  2. Lazy Loading: Highcharts চার্টের জন্য Lazy Loading ব্যবহার করুন, যাতে নির্দিষ্ট সময় বা ইউজার ইন্টারঅ্যাকশন এর মাধ্যমে চার্ট লোড হয়। এটি অ্যাপ্লিকেশনের প্রথম লোড সময় কমাতে সাহায্য করবে।
  3. Data Reduction: Highcharts এ যদি ডেটা অনেক বেশি থাকে, তবে data reduction বা ডেটা সংক্ষেপণ টেকনিক ব্যবহার করুন। আপনি dataGrouping অপশনটি ব্যবহার করতে পারেন, যাতে অধিক ডেটা একত্রিত হয়ে একটি ছোট সেগমেন্টে পরিণত হয়।

স্টেপ 4: Production Build পরবর্তী Performance পরীক্ষণ

আপনার অ্যাপ্লিকেশনের পারফরম্যান্স পরীক্ষণের জন্য বিভিন্ন টুল ব্যবহার করতে পারেন:

  • Lighthouse: এটি গুগলের একটি টুল যা অ্যাপ্লিকেশনের পারফরম্যান্স, অ্যাক্সেসিবিলিটি, SEO, এবং আরও অনেক বিষয় বিশ্লেষণ করে।
  • Chrome DevTools: DevTools এর Performance Tab ব্যবহার করে আপনি অ্যাপ্লিকেশনের লোড টাইম এবং পারফরম্যান্স বিশ্লেষণ করতে পারেন।

সারাংশ

Highcharts এর সাথে Angular অ্যাপ্লিকেশনের minification এবং bundling অপ্টিমাইজেশন আপনার অ্যাপ্লিকেশনকে দ্রুত লোড হতে সহায়তা করে এবং পারফরম্যান্স উন্নত করে। Angular CLI এর --prod ফ্ল্যাগ ব্যবহারের মাধ্যমে আপনি এই অপ্টিমাইজেশনগুলো স্বয়ংক্রিয়ভাবে প্রযোজ্য করতে পারেন। Highcharts এর Boost মডিউল, Lazy Loading এবং ডেটা সংক্ষেপণের মাধ্যমে আপনি বড় ডেটাসেটের সাথে কাজ করার সময় পারফরম্যান্স আরও বাড়াতে পারেন। Minification এবং Bundling অ্যাপ্লিকেশনের আকার কমিয়ে লোড টাইম এবং ব্যান্ডউইথ সাশ্রয় করতে সহায়ক।

Content added By
Md Azizur Rahman

Read more

Performance অপ্টিমাইজেশনের জন্য Minification এবং Bundling

or

Don't have an account? Register

Promotion